<template>
  <top></top>
  <div class="link">
  <a href="https://www.bilibili.com/video/BV1Gw4m1y71g/?spm_id_from=333.999.0.0&vd_source=4bb812153fd801535a7e0ad68a3a78e0" style="color: #ffffff;background-color: #78d6f5;border-radius: 10px;padding: 0.3vw" >视频链接</a>
  <p>郑嘉怡：xiaozheng9845 ;黎杏莲：00 ;梁晓华：9700; 谢文敏：谢文敏 ;黄敏静：黄敏静 ;范秀容：范范冰冰</p>
  </div>
  <div class="box">

    <div class="containers">
      <div class="container">
        <div class="containerbox">
          <div class="flex-items">
            <img src="http://codelover.club/static/img/headLogo.d458f61f.png" alt="" width="5%"
              style="margin-left: 40px;">
            <button :class="{ active: selectedCategory === 'all' }" @click="selectCategory('all')">推荐</button>
            <button :class="{ active: selectedCategory === 'frontend' }"
              @click="selectCategory('frontend')">前端开发</button>
            <button :class="{ active: selectedCategory === 'backend' }" @click="selectCategory('backend')">后端开发</button>
            <button :class="{ active: selectedCategory === 'comeback' }"
              @click="selectCategory('comeback')">精品免费</button>
          </div>
        </div>
        <a href="#/Class" style="text-decoration: none">
          <div class="js">
          <div class="js-box">
            <ul>
              <li v-for="course in filteredCourses" :key="course.id">
                <img :src="course.image" alt="">
                <h4>{{ course.name }}</h4>
                <p>简介: {{ course.description }}</p>
                <p>上课时间: {{ course.startTime }} ~ {{ course.endTime }}</p>
              </li>
            </ul>
          </div>
        </div>
        </a>

      </div>
      <div class="container" @click="toggleExpand" style="margin-top: 2em;">
        <div class="containerbox">
          <div class="flex-box">
            <p style="font-size: 20px;font-weight: 600;">更多</p>
            <img src="/img/下拉.png" alt="" width="18%">
          </div>
        </div>

        <transition name="expand">
          <div v-if="isExpanded">
            <div class="js">
              <div class="js-box">
                <ul>
                  <li>
                    <img src="https://codelover.club/icons/course/icon13.svg" alt="">
                    <h4>软件测试技术</h4>
                    <p>简介：软件测试技术</p>
                    <p>上课时间:2024-4-23 8:0:0 ~<br>2024-7-10 18:0:0 </p>
                  </li>
                  <li>
                    <img src="https://codelover.club/icons/course/icon4.svg" alt="">
                    <h4>程序设计基础</h4>
                    <p>简介：程序设计基础</p>
                    <p>上课时间:2024-4-23 8:0:0 ~<br>2024-7-10 18:0:0 </p>
                  </li>
                  <li>
                    <img src="https://codelover.club/icons/course/icon3.svg" alt="">
                    <h4>数据库高级应用</h4>
                    <p>简介：数据库高级应用</p>
                    <p>上课时间:2024-4-23 8:0:0 ~<br>2024-7-10 18:0:0 </p>
                  </li>
                  <li>
                    <img src="https://codelover.club/icons/course/icon10.svg" alt="">
                    <h4>后端技术与项目开发</h4>
                    <p>简介:后端技术与项目开发</p>
                    <p>上课时间:2024-4-23 8:0:0 ~<br>2024-7-10 18:0:0 </p>
                  </li>
                </ul>
              </div>
            </div>
            <div>

            </div>
          </div>
        </transition>
      </div>
    </div>

  </div>
  <footer>
    <div class="detail">
      <div class="links">
        <ul>
          <li>企业服务</li>
          <li>关于我们</li>
          <li>联系我们</li>
          <li>帮助中心</li>
          <li>意见反馈</li>
        </ul>
      </div>
      <div class="desc">
        ©2020 codelover.club 版权所有
        <a href="" style="color: #707070;">粤ICP备20072498号-1</a>
      </div>
    </div>
  </footer>
</template>

<script>
import top from '../components/top.vue';
export default {
  components: {
    top,
  },
  data() {
    return {
      isExpanded: true,
      selectedCategory: 'all',
      courses: [

        {
          id: 1,
          name: '软件测试技术',
          category: 'comeback',
          image: 'http://codelover.club/icons/course/icon13.svg',
          description: '软件测试技术',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 2,
          name: '程序设计基础',
          category: 'comeback',
          image: 'http://codelover.club/icons/course/icon4.svg',
          description: '程序设计基础',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 3,
          name: '数据库高级应用',
          category: 'comeback',
          image: 'http://codelover.club/icons/course/icon3.svg',
          description: '数据库高级应用',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 4,
          name: '后端技术与项目开发',
          category: 'backend',
          image: 'http://codelover.club/icons/course/icon10.svg',
          description: '后端技术课程描述',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 5,
          name: '24春季进销存系统设计与实现',
          category: 'comeback',
          image: 'http://codelover.club/icons/course/icon12.svg',
          description: '24春季进销存系统设计与实现',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 6,
          name: 'Web前端开发技术',
          category: 'all',
          image: 'http://codelover.club/icons/course/icon14.svg',
          description: 'Web前端开发技术',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },
        {
          id: 7,
          name: '专业技能综合实践',
          category: 'comeback',
          image: 'http://codelover.club/icons/course/icon7.svg',
          description: '专业技能综合实践',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },

        {
          id: 8,
          name: '前端框架应用项目开发',
          category: 'frontend',
          image: 'http://codelover.club/icons/course/icon1.svg',
          description: '前端框架应用项目开发',
          startTime: '2024-4-23 8:00',
          endTime: '2024-7-10 18:00'
        },


      ],
      isCollapsed: false,
    };
  },
  computed: {
    filteredCourses() {
      if (this.selectedCategory === 'all') {
        return this.courses;
      } else {
        return this.courses.filter(course => course.category === this.selectedCategory);
      }
    },
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category;
      this.isExpanded = true;
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    toggleExpand() {
      // 切换 isExpanded 的值来控制内容的显示/隐藏  
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style scoped>
.link{
  display: flex;
  justify-content: center;
}
.box {
  margin: 150px;
}

.active {
  font-weight: bold;
  border-bottom: 3px solid rgb(255, 115, 0);
  /* 添加黄色底部边框 */
}

.container {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex-direction: column;
}

.container {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex-direction: column;
}

.containerbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.flex-items {
  height: 10vh;
  color: #707070;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 3em;
}

.flex-item img {
  height: 50px;
  margin-right: 10px;

}

button {
  margin-left: 5px;
  border: none;
  background-color: #ffffff;

}

.flex-item:last-child {
  margin-right: 0;
}

.js {

  width: 1150px;
  overflow: hidden;
}
.js-box{
  text-decoration: none;
}
.js-collapsed {
  max-height: 0;
}

.js-box ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  justify-content: space-between;
  transition: box-shadow 0.3s ease;
}

.js-box ul li {
  flex: 1 0 200px;
  margin: 10px;
  text-align: center;
  list-style: none;
  padding: 10px;
  width: 21%;
  border: 1px solid #dedddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 0 0 calc(25% - 20px);
  margin-bottom: 20px;
  box-sizing: border-box;

}

.js-box ul li img {
  height: 150px;
  width: 210px;
  border-radius: 10px;
  object-fit: cover;
}

.js-box ul li h4 {
  font-size: 18px;
  margin: 10px 0 5px 0;
  color: #616161;
  text-align: left;
}

.js-box ul li p {
  font-size: 14px;
  color: #393939;
  text-align: left;
}

.js-box ul li:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}


.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5em;
}

footer {
  flex-direction: column;
  justify-content: flex-end;
  height: 170px;
  background: #f6f6f6;
  text-align: center;
}

.detail {
  color: #707070;
  text-align: center;
  align-items: center;
  background-color: #f6f6f6;
}

.links ul {
  justify-content: center;
  text-align: center;
  align-items: center;
  display: flex;
  list-style: none;
  gap: 50px;
  font-size: 20px;
  padding: 30px;
}

@media (max-width: 768px) {
  .box {
    margin: 20px;
  }

  .flex-items {
    margin-left: -20px;
    font-size: 5px;
  }

  .container {
    width: 90%;
  }

  .js {
    width: 99%;
  }

  .js-box {
    width: 96%;
    flex-direction: column;
  }

  .js-box ul li {
    flex: 1 0 100%;
  }



}
</style>